import React, { useEffect } from 'react';
import { useSearchParams } from 'react-router-dom';
import { Button, message, Dropdown, Avatar, Modal } from 'antd';
import { PoweroffOutlined, UserDeleteOutlined, SortAscendingOutlined, ExclamationCircleOutlined } from '@ant-design/icons';
import { getTestsByTypesIdApi, getTestsByIdApi, findTestsByIdApi } from '../api/test';
import { addTestedsApi, getTestedsByIdApi, getTestedsByStuIdApi } from '../api/tested';

export default function Test() {
    // const [id,setId] = useSearchParams();
    // console.log('id',id);
    // console.log('setId',setId);
    const showPromiseConfirm = () => {
        confirm({
            title: '退出账号',
            icon: <ExclamationCircleOutlined />,
            content: '您确定要退出当前账号吗?',
            okText: '确定',
            cancelText: "取消",
            onOk() {
                localStorage.clear()
                navigate('/login', { replace: true })
                // return new Promise((resolve, reject) => {
                //     // console.log(resolve,reject);
                //     // setTimeout(Math.random() > 0.5 ? resolve : reject, 1000);
                //     navigate('/login')
                //     // localStorage.clear()
                // }).catch(() => console.log('Oops errors!'));
            },
            onCancel() { },
        });
    };
    // 点击显示修改资料模态框
    function showModifyData() {
        document.querySelector(".modifyDataBox").style.display = "block";
    }
    // 点击显示排行榜模态框
    function showRankingList() {
        document.querySelector(".rankingListBox").style.display = "block";
    }
    // 点击隐藏修改资料 = 排行榜模态框
    function close() {
        document.querySelector(".modifyDataBox").style.display = "none";
        document.querySelector(".rankingListBox").style.display = "none";
    }
    const items = [
        {
            key: '1',
            // label: '个人中心',
            label: (
                <a onClick={showModifyData}>修改资料</a>
            ),
            icon: <UserDeleteOutlined />
        },
        {
            key: '2',
            // label: '排行榜',
            label: (
                <a onClick={showRankingList}>排行榜</a>
            ),
            icon: <SortAscendingOutlined />
        },
        {
            key: '3',
            // label: '退出登录',
            label: (
                <a onClick={showPromiseConfirm}>退出登录</a>
            ),
            icon: <PoweroffOutlined />,
        },

    ];
    useEffect(() => {
        // console.log(111111111);
        getTestsByTypesIdApi().then(res => {
            console.log('res1', res);
        });
        // getTestsByIdApi().then(res => {
        //     console.log('res2', res);
        // });
        // findTestsByIdApi().then(res => {
        //     console.log('res3', res);
        // });
        // addTestedsApi().then(res=>{
        //     console.log('已考',res);
        // });
        // getTestedsByIdApi().then(res => {
        //     console.log(res);
        // });
        // getTestedsByStuIdApi().then(res=>{
        //     console.log(res);
        // });
    }, [])
    return (
        <div>
            <div className="homeNav">
                <div className="homeNav_center">
                    <div className="homeNav_logo">
                        <img src="/static/home/logo.png" alt="" />
                    </div>
                    <ul className='nav'>
                        <li className='nav_li'><a href="">首页</a></li>
                        <li className='nav_li'><a href="">考试</a></li>
                        <li className='nav_li'><a href="">错题本</a></li>
                        <li className='nav_li'><a href="">收藏夹</a></li>
                    </ul>
                    {/* 已登录首页 */}
                    <div className="homeNav_right">
                        <Dropdown
                            menu={{
                                items,
                            }}
                            placement="bottom"
                            arrow
                        >
                            <Avatar style={{ width: '44px', height: '44px', display: 'flex', justifyContent: 'center', alignItems: 'center', marginRight: '12px' }}
                                src="static/home/user.png" />
                            {/* <Avatar style={{ width: '44px', height: '44px', display: 'flex', justifyContent: 'center', alignItems: 'center', marginRight: '12px' }}
                            src={userinfo.avatar} /> */}
                        </Dropdown>
                        {/* <span className='homeNav_name'>{userinfo.name}</span> */}
                        <span className='homeNav_name'>李四</span>

                    </div>
                </div>
            </div>
            {/* 面包屑 */}
            <div className="crumbsBox">
                <div className="crumbs"><span style={{ color: '#6966eb' }}>首页</span> {'>'} 考试</div>
            </div>
            {/* 正在进行的考试 */}
            <div className="underwayBox">
                <div className="underwayBox_title">正在进行的考试</div>
                <div className="underwayBox_cardBox">
                    <div className="underwayBox_cardBox_left">
                        <div className="underwayBox_cardBox_left_icon">
                            <img src="/static/test/test-1.png" alt="" />
                        </div>
                        <div className="underwayBox_cardBox_left_text">
                            <div className="underwayBox_cardBox_left_text_titleBox">
                                <div>前端HTML测试题</div>
                                <div className="joinBtn">可参加</div>
                            </div>
                            <div className='underwayBox_cardBox_left_text_time'>2022-03-31 09:48~2022-04-03 09:48 <img src="/static/test/clock.png" alt="" /> <span>限时60分钟</span></div>
                        </div>
                    </div>
                    <div className="underwayBox_cardBox_right">
                        <div className="enterBtn">进入</div>
                    </div>
                </div>
                <div className="underwayBox_cardBox">
                    <div className="underwayBox_cardBox_left">
                        <div className="underwayBox_cardBox_left_icon">
                            <img src="/static/test/test-2.png" alt="" />
                        </div>
                        <div className="underwayBox_cardBox_left_text">
                            <div className="underwayBox_cardBox_left_text_titleBox">
                                <div>前端HTML测试题</div>
                                <div className="joinBtn">可参加</div>
                            </div>
                            <div className='underwayBox_cardBox_left_text_time'>2022-03-31 09:48~2022-04-03 09:48 <img src="/static/test/clock.png" alt="" /> <span>限时60分钟</span></div>
                        </div>
                    </div>
                    <div className="underwayBox_cardBox_right">
                        <div className="enterBtn">进入</div>
                    </div>
                </div>
                <div className="underwayBox_cardBox">
                    <div className="underwayBox_cardBox_left">
                        <div className="underwayBox_cardBox_left_icon">
                            <img src="/static/test/test-3.png" alt="" />
                        </div>
                        <div className="underwayBox_cardBox_left_text">
                            <div className="underwayBox_cardBox_left_text_titleBox">
                                <div>前端HTML测试题</div>
                                <div className="joinBtn">可参加</div>
                            </div>
                            <div className='underwayBox_cardBox_left_text_time'>2022-03-31 09:48~2022-04-03 09:48 <img src="/static/test/clock.png" alt="" /> <span>限时60分钟</span></div>
                        </div>
                    </div>
                    <div className="underwayBox_cardBox_right">
                        <div className="enterBtn">进入</div>
                    </div>
                </div>
                <div className="underwayBox_cardBox">
                    <div className="underwayBox_cardBox_left">
                        <div className="underwayBox_cardBox_left_icon">
                            <img src="/static/test/test-4.png" alt="" />
                        </div>
                        <div className="underwayBox_cardBox_left_text">
                            <div className="underwayBox_cardBox_left_text_titleBox">
                                <div>前端HTML测试题</div>
                                <div className="joinBtn">可参加</div>
                            </div>
                            <div className='underwayBox_cardBox_left_text_time'>2022-03-31 09:48~2022-04-03 09:48 <img src="/static/test/clock.png" alt="" /> <span>限时60分钟</span></div>
                        </div>
                    </div>
                    <div className="underwayBox_cardBox_right">
                        <div className="enterBtn">进入</div>
                    </div>
                </div>
            </div>
            <div className="completedBox">
                <div className="underwayBox_title">已完成的考试</div>
                <div className="underwayBox_cardBox">
                    <div className="underwayBox_cardBox_left">
                        <div className="underwayBox_cardBox_left_icon">
                            <img src="/static/test/test-5.png" alt="" />
                        </div>
                        <div className="underwayBox_cardBox_left_text">
                            <div className="underwayBox_cardBox_left_text_titleBox">
                                <div>前端HTML测试题</div>
                                <div className="completedBtn">已完成</div>
                            </div>
                            <div className='underwayBox_cardBox_left_text_time'>2022-03-31 09:48~2022-04-03 09:48 <img src="/static/test/clock.png" alt="" /> <span>限时60分钟</span></div>
                        </div>
                    </div>
                    <div className="underwayBox_cardBox_right">
                        <div className="enterBtn">查看</div>
                    </div>
                </div>
                <div className="underwayBox_cardBox">
                    <div className="underwayBox_cardBox_left">
                        <div className="underwayBox_cardBox_left_icon">
                            <img src="/static/test/test-6.png" alt="" />
                        </div>
                        <div className="underwayBox_cardBox_left_text">
                            <div className="underwayBox_cardBox_left_text_titleBox">
                                <div>前端HTML测试题</div>
                                <div className="completedBtn">已完成</div>
                            </div>
                            <div className='underwayBox_cardBox_left_text_time'>2022-03-31 09:48~2022-04-03 09:48 <img src="/static/test/clock.png" alt="" /> <span>限时60分钟</span></div>
                        </div>
                    </div>
                    <div className="underwayBox_cardBox_right">
                        <div className="enterBtn">查看</div>
                    </div>
                </div>
            </div>
            <footer className='footer'>
                Copyright © 2021  成都蜗牛创想科技有限公司
            </footer>
            {/* 修改资料 */}
            <div className="modifyDataBox">
                <div className="modifyDataBox_closeIcon" onClick={close}>
                    <img src="/static/home/popclose.png" alt="" />
                </div>
                <div className="modifyDataBox_top">修改资料</div>
                <div className="modifyBox_main">
                    <div className="modifyBox_mainBox">
                        <div className="modifyBox_mainLeft">
                            <div className="modifyBox_mainLeftImg">
                                {/* <img src="../../public/static/home/user2.png" alt="" /> */}
                                <img src="/static/home/user2.png" alt="" />
                            </div>
                            <p style={{ marginTop: '14px', marginBottom: '11px' }}>李四</p>
                            <span>点击图片修改头像</span>
                        </div>
                        <div className="modifyBox_mainRight">
                            <div style={{ marginBottom: '20px' }}>
                                <label>手机号：</label>
                                <input type="text" value='15228161945' disabled /><span>*手机号不可更改</span>
                            </div>
                            <div style={{ marginBottom: '20px' }}>
                                <label>姓&emsp;名：</label>
                                <input type="text" placeholder='李四' /><span>*由字母、数字构成</span>
                            </div>
                            <div style={{ marginBottom: '20px' }}>
                                <label>性&emsp;别：</label>
                                <span className='sexInput'>
                                    <div className='radioBox'>
                                        <input className='radioInput' type="radio" />男
                                        <input className='radioInput' type="radio" />女
                                    </div>
                                    {/* <input className='radioInput' type="radio" />男
                                <input className='radioInput' type="radio" />女 */}
                                </span>
                            </div>
                            <div style={{ marginBottom: '20px' }}>
                                <label>部&emsp;门：</label>
                                {/* <input type="" /> */}
                                <select name="" id="select">
                                    <option value="">信息中心</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div className="modifyBox_mainBtn">
                        <button className='cancelBtn' onClick={close}>取消</button>
                        <button className='determineBtn'>确定</button>
                    </div>
                </div>
            </div>
            {/* 排行榜 */}
            <div className="rankingListBox">
                <div className="modifyDataBox_closeIcon" onClick={close}>
                    <img src="/static/home/popclose.png" alt="" />
                </div>
                <table style={{ width: '364px', margin: '0 auto', marginTop: '20px' }}>
                    <tbody>
                        <td style={{ textAlign: 'left', color: '#999999' }}>名次</td>
                        <td style={{ textAlign: 'center', color: '#999999' }}>考试</td>
                        <td style={{ textAlign: 'right', color: '#999999' }}>成绩</td>
                    </tbody>
                </table>
                <div className="colored">
                    <table style={{ width: '364px', margin: '0 auto', }}>
                        <tbody>
                            <td className='black' style={{ textAlign: 'left', color: '#f60000', width: '30px', fontWeight: 'normal' }}>1</td>
                            <td className='black' style={{ textAlign: 'center' }}>第一周周考</td>
                            <td className='black' style={{ textAlign: 'right' }}>98</td>
                        </tbody>
                    </table>
                </div>
                <div>
                    <table className='table' >
                        <tbody>
                            <td className='black' style={{ textAlign: 'left', color: ' #ff7a18', fontWeight: 'normal' }}>2</td>
                            <td className='black' style={{ textAlign: 'center' }}>第一周周考</td>
                            <td className='black' style={{ textAlign: 'right' }}>98</td>
                        </tbody>
                    </table>
                </div>
                <div className="colored">
                    <table className='table'>
                        <tbody>
                            <td className='black' style={{ textAlign: 'left', color: '#666666', fontWeight: 'normal' }}>3</td>
                            <td className='black' style={{ textAlign: 'center' }}>第一周周考</td>
                            <td className='black' style={{ textAlign: 'right' }}>98</td>
                        </tbody>
                    </table>
                </div>
                <div>
                    <table className='table'>
                        <tbody>
                            <td className='black' style={{ textAlign: 'left', color: '#b7b7b7', fontWeight: 'normal' }}>4</td>
                            <td className='black' style={{ textAlign: 'center' }}>第一周周考</td>
                            <td className='black' style={{ textAlign: 'right' }}>98</td>
                        </tbody>
                    </table>
                </div>
                <div className="colored">
                    <table className='table'>
                        <tbody>
                            <td className='black' style={{ textAlign: 'left', color: '#b7b7b7', fontWeight: 'normal' }}>5</td>
                            <td className='black' style={{ textAlign: 'center' }}>第一周周考</td>
                            <td className='black' style={{ textAlign: 'right' }}>98</td>
                        </tbody>
                    </table>
                </div>
                <div>
                    <table className='table'>
                        <tbody>
                            <td className='black' style={{ textAlign: 'left', color: '#b7b7b7', fontWeight: 'normal' }}>6</td>
                            <td className='black' style={{ textAlign: 'center' }}>第一周周考</td>
                            <td className='black' style={{ textAlign: 'right' }}>98</td>
                        </tbody>
                    </table>
                </div>
                <div className="colored">
                    <table className='table'>
                        <tbody>
                            <td className='black' style={{ textAlign: 'left', color: '#b7b7b7', fontWeight: 'normal' }}>7</td>
                            <td className='black' style={{ textAlign: 'center' }}>第一周周考</td>
                            <td className='black' style={{ textAlign: 'right' }}>98</td>
                        </tbody>
                    </table>
                </div>
                <div>
                    <table className='table'>
                        <tbody>
                            <td className='black' style={{ textAlign: 'left', color: '#b7b7b7', fontWeight: 'normal' }}>8</td>
                            <td className='black' style={{ textAlign: 'center' }}>第一周周考</td>
                            <td className='black' style={{ textAlign: 'right' }}>98</td>
                        </tbody>
                    </table>
                </div>
                <div className="colored">
                    <table className='table'>
                        <tbody>
                            <td className='black' style={{ textAlign: 'left', color: '#b7b7b7', fontWeight: 'normal' }}>9</td>
                            <td className='black' style={{ textAlign: 'center' }}>第一周周考</td>
                            <td className='black' style={{ textAlign: 'right' }}>98</td>
                        </tbody>
                    </table>
                </div>
                <div>
                    <table className='table'>
                        <tbody>
                            <td className='black' style={{ textAlign: 'left', width: '30px', color: '#b7b7b7', fontWeight: 'normal' }}>10</td>
                            <td className='black' style={{ textAlign: 'center' }}>第一周周考</td>
                            <td className='black' style={{ textAlign: 'right' }}>98</td>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    )
}
